import React from 'react';
import { Form, Select, DatePicker, Spin } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import { getChannelListWithoutTalent } from '../../service';

const { Option } = Select;
const { RangePicker } = DatePicker;

const ChannelForm = ({ form, type, onSubmit }) => {
    const { getFieldDecorator } = form;

    const { data, loading } = useRequest(() => getChannelListWithoutTalent({ channelType: type }), {
        refreshDeps: [type],
        ...defaultFormatResult
    });

    const handleSubmit = () => {
        const values = form.getFieldsValue();
        const { createStartDate = [], ...rest } = values;
        const params = {
            ...rest,
            createStartDate: createStartDate.length > 0 ? createStartDate[0]?.format('YYYY-MM-DD') : '',
            createEndDate: createStartDate.length > 1 ? createStartDate[1]?.format('YYYY-MM-DD') : ''
        };
        if (onSubmit) {
            onSubmit(params, type);
        }
    };

    const handleSelect = (v, field) => {
        form.setFieldsValue({
            [field]: v
        });
        handleSubmit();
    };

    const handleDateChange = v => {
        form.setFieldsValue({
            createStartDate: v
        });
        handleSubmit();
    };

    return (
        <Form layout="inline">
            <Form.Item label="名称">
                <Spin spinning={loading}>
                    {getFieldDecorator('channelCode', {
                        initialValue: ''
                    })(
                        <Select
                            style={{ width: 148 }}
                            onChange={v => handleSelect(v, 'channelCode')}
                            getPopupContainer={trigger => trigger.parentElement}
                        >
                            <Option value="" key={1} title="全部">
                                全部
                            </Option>
                            {data?.map(item => (
                                <Option value={item.channelCode} key={item.channelCode} title={item.channelName}>
                                    {item.channelName}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Spin>
            </Form.Item>
            <Form.Item label="状态">
                {getFieldDecorator('channelStatus', {
                    initialValue: ''
                })(
                    <Select
                        style={{ width: 148 }}
                        onChange={v => handleSelect(v, 'channelStatus')}
                        getPopupContainer={trigger => trigger.parentElement}
                    >
                        <Option value="">全部</Option>
                        <Option value={1}>启用</Option>
                        <Option value={0}>禁用</Option>
                    </Select>
                )}
            </Form.Item>
            <Form.Item label="创建时间">
                {getFieldDecorator('createStartDate')(
                    <RangePicker
                        style={{ width: 220 }}
                        getCalendarContainer={trigger => trigger.parentElement}
                        onChange={handleDateChange}
                    />
                )}
            </Form.Item>
        </Form>
    );
};

export default Form.create({})(ChannelForm);
